<%--
  Created by IntelliJ IDEA.
  User: kwc13
  Date: 2023-12-22
  Time: 下午 02:44
  To change this template use File | Settings | File Templates.
--%>
<!-- 标记为HTML格式 -->
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page isELIgnored="false" %>
<!-- 设置页面为Chain -->
<html lang="ch">
<head>
    <title>填写订单信息</title>
    <!-- 设置地址栏主题背景颜色 -->
    <meta name="theme-color" content="#000000">
    <!-- 页面描述 -->
    <meta name="description" content="页面描述信息">
    <!-- 移动端显示 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 页面Logo -->
    <link rel="shortcut icon" href="http://localhost:8083/resource_packs/images/logo.png">
    <!--
    导入Jquery、请求js、value工具类、input工具类、页面js、页面样式css
    ${pageContext.request.contextPath}:获取当前 web 应用的上下文路径
    -->
    <script src="${pageContext.request.contextPath}/other/component/jquery.min.js"></script>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=c264f5d39a79cc02595c7ed62218e412"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
    <script src="${pageContext.request.contextPath}/other/resource/aes_key_util.js"></script>
    <script src="${pageContext.request.contextPath}/other/resource/address_util.js"></script>
    <script src="${pageContext.request.contextPath}/other/resource/input_util.js"></script>
    <script src="${pageContext.request.contextPath}/other/resource/text_util.js"></script>
    <script src="${pageContext.request.contextPath}/other/request/background/gaud.js"></script>
    <script src="${pageContext.request.contextPath}/other/request/reception_desk/orders.js"></script>
    <script src="${pageContext.request.contextPath}/other/request/reception_desk/order_settlement.js"></script>
    <script src="${pageContext.request.contextPath}/other/scripts/reception_desk/order_settlement.js"></script>
    <link href="${pageContext.request.contextPath}/other/style/reception_desk/order_settlement.css" rel="stylesheet"
          type="text/css"/>
</head>
<body>
<div class="body">
    <div class="function">
        <div class="function-protect">
            <div class="title">
                <div class="logo">
                    <img src="http://localhost:8083/resource_packs/images/logo.png" alt="小米Logo">
                </div>
                <div class="function-title">
                    <h1>确认订单</h1>
                </div>
            </div>
            <div class="other-function">
                <ul class="block">
                    <jsp:useBean id="name" scope="request" type="java.lang.String"/>
                    <li class="user-name options drop-down">
                        <a href="" class="drop-down-menu">${name}
                            <img src="http://localhost:8083/resource_packs/images/drop_down.png"
                                 class="options-img" alt="下拉菜单">
                        </a>
                    </li>
                    <li><span class="fill-entity">|</span></li>
                    <li class="options"><a href="">我的订单</a></li>
                </ul>
                <div class="more drop-down">
                    <ul>
                        <li>
                            <a href="">个人中心</a>
                        </li>
                        <li>
                            <a href="">评价晒单</a>
                        </li>
                        <li>
                            <a href="">我的喜欢</a>
                        </li>
                        <li>
                            <a href="">小米账户</a>
                        </li>
                        <li>
                            <a href="">退出登录</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="order">
        <div class="shipping-address">
            <div class="shipping-address-title">
                <span>收货地址</span>
            </div>
            <div class="address-list">
                <jsp:useBean id="addressList" scope="request" type="java.util.List"/>
                <c:forEach var="address" items="${addressList}" varStatus="addressStatus">
                    <div class="shipping-address-selection" address-id="${address.addressId}"
                         style="${address.isSelectedAddress == 0 ? 'border: 1px solid #FF6A00;' : ''}">
                        <a class="address-id" style="display: none"></a>
                        <div class="shipping-address-name">
                            <span class="address-name">${address.addressName}</span>
                            <a class="addressLabel">${address.addressLabels}</a>
                        </div>
                        <div class="shipping-address-telephone">
                            <c:set var="addressPhone" value="${address.addressPhone}" />
                            <c:set var="replacedAddressPhone" value="${fn:replace(addressPhone, '([0-9]{3})[0-9]{4}([0-9]{4})', '$1****$2')}" />
                            <span class="address-phone">${replacedAddressPhone}</span>
                        </div>
                        <div class="area-show">
                            <span>
                                <a class="province">${address.addressProvince}</a>
                                <a class="city">${address.addressCity}</a>
                                <a class="district">${address.addressDistrict}</a>
                            </span><br>
                            <span class="exhibit-address" style="margin-top: -15px;">${address.fullAddress}</span>
                        </div>
                        <div class="change-address">
                            <a class="revise" address="${address}">修改</a>
                        </div>
                    </div>
                </c:forEach>

                <div class="add-address">
                    <div class="add-address-img">
                        <img src="http://localhost:8083/resource_packs/images/add_address.png"
                             alt="地址">
                    </div>
                    <div class="add-address-word">
                        添加地址
                    </div>
                </div>
            </div>
        </div>
        <div class="commodity-purchase-list">
            <div class="commodity-purchase-title">
                <span>商品及优惠券</span>
            </div>
            <jsp:useBean id="shoppingCartList" scope="request" type="java.util.List"/>
            <c:set var="totalQuantity" value="0"/>
            <c:set var="totalPrice" value="0"/>
            <div class="commodity-purchase">
                <c:forEach var="shoppingCart" items="${shoppingCartList}">
                    <div class="purchased-commodity-list">
                        <div class="purchased-commodity-img">
                            <img src="http://localhost:8083/resource_packs/images/${shoppingCart.commodity.commodityImages}"
                                 class="purchased-img" alt="商品">
                        </div>
                        <div class="purchased-commodity-name">
                                ${shoppingCart.commodity.commodityName}
                        </div>
                        <div class="purchased-commodity-quantity">
                            <a class="unit-price">${shoppingCart.commodity.commodityPrice}</a>元&emsp;
                            ×
                            <span class="quantity">${shoppingCart.quantity}</span>
                        </div>
                        <div class="purchased-commodity-subtotal">
                            <c:set var="subTotal"
                                   value="${shoppingCart.commodity.commodityPrice * shoppingCart.quantity}"/>
                                ${subTotal}元
                        </div>
                    </div>
                    <c:if test="${shoppingCart.commodityGifts != null}">
                        <div class="purchased-commodity-list">
                            <div class="purchased-commodity-img">
                                <img src="http://localhost:8083/resource_packs/images/${shoppingCart.commodityGifts.commodity.commodityImages}"
                                     class="purchased-img" alt="商品">
                            </div>
                            <div class="purchased-commodity-name">
                                    ${shoppingCart.commodityGifts.commodity.commodityName}&nbsp;
                            </div>
                            <div class="purchased-commodity-quantity">

                                <a class="unit-price">免费</a>
                                &emsp;×
                                <span class="quantity">1</span>
                                <c:set var="totalQuantity" value="${totalQuantity + 1}"/>
                            </div>
                            <div class="purchased-commodity-subtotal">
                                免费
                            </div>
                        </div>
                    </c:if>
                    <c:set var="totalQuantity" value="${totalQuantity + shoppingCart.quantity}"/>
                    <c:set var="totalPrice" value="${totalPrice + subTotal}"/>
                    <c:forEach var="commodityInsurance" items="${shoppingCart.commodityInsuranceList}">
                        <c:set var="totalQuantity" value="${totalQuantity + 1}"/>
                        <div class="purchased-commodity-list">
                            <div class="purchased-commodity-img">
                                <img src="http://localhost:8083/resource_packs/images/${commodityInsurance.insuranceType.insuranceTypeLogo}"
                                     class="purchased-img" alt="商品">
                            </div>
                            <div class="purchased-commodity-name">
                                    ${shoppingCart.commodity.commodityName}&nbsp;
                                    ${commodityInsurance.insuranceTitle}
                            </div>
                            <div class="purchased-commodity-quantity">
                                <c:if test="${commodityInsurance.addPrice != null}">
                                    <a class="unit-price">${commodityInsurance.addPrice}</a>元
                                </c:if>
                                <c:if test="${commodityInsurance.addPrice == null}">
                                    <a class="unit-price">免费</a>
                                </c:if>
                                &emsp;×
                                <span class="quantity">1</span>
                            </div>
                            <div class="purchased-commodity-subtotal">
                                <c:if test="${commodityInsurance.addPrice != null}">
                                    ${commodityInsurance.addPrice}元
                                </c:if>
                                <c:if test="${commodityInsurance.addPrice == null}">
                                    免费
                                </c:if>
                            </div>
                        </div>
                        <c:set var="totalPrice" value="${totalPrice + commodityInsurance.addPrice}"/>
                    </c:forEach>
                </c:forEach>
            </div>
        </div>
        <div class="delivery">
            <span class="delivery-method-title">配送方式</span>
            <jsp:useBean id="isFreeShipping" scope="request" type="java.lang.Integer"/>
            <c:if test="${isFreeShipping == 1}">
                <a class="delivery-method">包邮</a>
                <c:set var="freight" value="0"/>
            </c:if>
            <c:if test="${isFreeShipping == 0}">
                <a class="delivery-method">需运费</a>
                <c:set var="freight" value="10"/>
            </c:if>
        </div>
        <div class="bill">
            <div>
                <span class="bill-title">发票</span>
                <span class="invoice-selection">电子普通发票&emsp;个人&emsp;商品明细&emsp;></span>
            </div>
            <jsp:useBean id="couponList" scope="request" type="java.util.List"/>
            <div class="price-breakdown">
                <div class="preferential">
                    <c:if test="${couponList.size() != 0}">
                        <div class="coupons use-coupon">
                            <img src="http://localhost:8083/resource_packs/images/add_preferential.png" alt="优惠卷添加">
                            <span>使用优惠卷</span>
                            <a>${couponList.size()}张可用</a>
                        </div>
                    </c:if>
                </div>
                <div class="price-calculation">
                    <ul class="total-cost">
                        <li><span>商品件数:</span><a class="total-number">${totalQuantity}件</a></li>
                        <li><span>商品总数:</span><a>${totalPrice}元</a></li>
                        <li><span>活动优惠:</span><a>-0元</a></li>
                        <li><span>优惠卷抵扣:</span><a class="coupon-credit-amount">-0元</a></li>
                        <li><span>运费:</span><a>${freight}元</a></li>
                    </ul>
                </div>
            </div>
            <div class="total-payable">
                <div class="total">
                    <span>应付总额:</span><a>${totalPrice}</a><span>元</span>
                </div>
            </div>
            <jsp:useBean id="selectAddress" scope="request" type="com.xm.entity.Address"/>
            <div class="is-order">
                <div class="confirm-harvesting-address">
                    <div class="confirm-name">
                        <c:set var="phone" value="${selectAddress.addressPhone}" />
                        <c:set var="replacedPhone" value="${fn:replace(phone, '([0-9]{3})[0-9]{4}([0-9]{4})', '$1****$2')}" />
                        <span class="address-name-checked">${selectAddress.addressName}</span>
                        <a class="address-phone-checked">${replacedPhone}</a>
                    </div>
                    <div class="confirm-address">
                        <span class="address-checked">${selectAddress.addressProvince}
                            ${selectAddress.addressCity}
                            ${selectAddress.addressDistrict}
                            ${selectAddress.fullAddress}</span>
                    </div>
                </div>
                <div class="place-order">
                    <jsp:useBean id="informationId" scope="request" type="java.lang.Integer"/>
                    <jsp:useBean id="accountId" scope="request" type="java.lang.String"/>
                    <a longitude="${selectAddress.longitude}"
                       latitude="${selectAddress.latitude}"
                       total-quantity="${totalQuantity}"
                       total-price="${totalPrice}"
                       freight="${freight}"
                       information-id="${informationId}"
                       account-id="${accountId}"
                       class="confirm-order">
                        确认下单
                    </a>
                    <a href="${pageContext.request.contextPath}/shop?acccountId=${accountId}">返回首页</a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 隐藏部分 -->
<div class="hint" style="display: none">
    <div class="blinded">
    </div>
    <div class="hint-revise">
        <div class="hint-title">
            <span class="change-address-title">添加地址</span>
            <img src="http://localhost:8083/resource_packs/images/pop_ups_closes.png" class="hint-img" alt="关闭">
        </div>
        <div style="display: inline-flex;">
            <div class="revise-name">
                <span class="name-title">姓名</span>
                <label>
                    <input type="text" class="name" value="" name="name">
                </label>
            </div>
            <div class="revise-name">
                <span class="phone-title">手机号</span>
                <label>
                    <input type="text" class="phone-number" value="" name="phone-number">
                </label>
            </div>
        </div>
        <div class="address">
            <div class="edit-address">
                <span class="address-word">省级  市级  区县  区域</span>
                <img src="http://localhost:8083/resource_packs/images/drop_down.png" class="address-img" alt="下拉">
            </div>
        </div>
        <div class="address-text">
            <span class="address-character">详细地址</span>
            <label>
                <textarea name="description" class="specific-address"></textarea>
            </label>
        </div>
        <div class="label">
            <span class="label-word">地址标签</span>
            <label>
                <input type="text" class="address-label">
            </label>
        </div>
        <div class="operate">
            <a class="confirm" information-id="${informationId}">确认</a> <span class="cancel">取消</span>
        </div>
        <div class="region-selection">
            <div>
                <img src="http://localhost:8083/resource_packs/images/pop_ups_closes.png" class="remove-img" alt="关闭">
            </div>
            <div class="show-selected-regions">
                <span class="province">选择省份/自治区</span>
            </div>
            <div class="selected-regions">
                <div class="select-address">

                </div>
            </div>
            <div class="position">
                <a class="positioning">快速定位></a>
            </div>
        </div>
    </div>
</div>

<!-- 隐藏部分 -->
<div class="hint" style="display: none;height: auto;padding-bottom: 40px;">
    <div class="blinded">
    </div>
    <div class="hint-revise">
        <div class="hint-title">
            <span class="change-address-title">选择优惠卷</span>
            <img src="http://localhost:8083/resource_packs/images/pop_ups_closes.png" class="hint-img" alt="关闭">
        </div>
        <c:forEach var="coupon" items="${couponList}" varStatus="couponStatus">
            <div class="coupon">
                <span>${coupon.couponTitle}</span>
                <label>
                    <c:if test="${couponStatus.index == 0}">
                        <input type="radio" name="coupon" value="${coupon}" checked>
                    </c:if>
                    <c:if test="${couponStatus.index != 0}">
                        <input type="radio" name="coupon" value="${coupon}">
                    </c:if>
                </label>
            </div>
        </c:forEach>
        <div class="coupon-confirm">
            <button class="btn-primary" total="${totalPrice}">确认使用</button>
            <button class="btn-gray">取消</button>
        </div>

    </div>
</div>

<!-- 隐藏部分 -->
<div class="hint" style="display: none">
    <div class="blinded">
    </div>
    <div class="hint-revise">
        <div class="hint-title">
            <span class="change-address-title">修改地址</span>
            <img src="http://localhost:8083/resource_packs/images/pop_ups_closes.png" class="hint-img" alt="关闭">
        </div>
        <div style="display: inline-flex;">
            <div class="revise-name">
                <span class="name-title">姓名</span>
                <label>
                    <input type="text" class="name update-name" value="" name="name">
                </label>
            </div>
            <div class="revise-name">
                <span class="phone-title">手机号</span>
                <label>
                    <input type="text" class="phone-number update-phone-number" value="" name="phone-number">
                </label>
            </div>
        </div>
        <div class="address">
            <div class="edit-address">
                <span class="address-word update-address-word">省级  市级  区县  区域</span>
                <img src="http://localhost:8083/resource_packs/images/drop_down.png" class="address-img" alt="下拉">
            </div>
        </div>
        <div class="address-text">
            <span class="address-character">详细地址</span>
            <label>
                <textarea name="description" class="specific-address update-specific-address"></textarea>
            </label>
        </div>
        <div class="label">
            <span class="label-word">地址标签</span>
            <label>
                <input type="text" class="address-label update-address-lable">
            </label>
        </div>
        <div class="operate">
            <a class="confirm update-address-confirm" >确认</a> <span class="cancel">取消</span>
        </div>
        <div class="region-selection">
            <div>
                <img src="http://localhost:8083/resource_packs/images/pop_ups_closes.png" class="remove-img" alt="关闭">
            </div>
            <div class="show-selected-regions">
                <span class="province">选择省份/自治区</span>
            </div>
            <div class="selected-regions">
                <div class="select-address">

                </div>
            </div>
            <div class="position">
                <a class="positioning">快速定位></a>
            </div>
        </div>
    </div>
</div>

<!-- jsp:include导入网页尾部  jsp:param向该页面传值 -->
<jsp:include page="/WEB-INF/page/reception_desk/footer_page.jsp" flush="true">
    <jsp:param name="id" value="1"/>
</jsp:include>
</body>
</html>
